<template>
  <div>
    <a-drawer :visible="visible" centered :width="drawerWidth" @close="onClose" :closable="true" title="相似商品" placement="right" :destroyOnClose="true" :maskClosable="false">
      <a-spin tip="Loading..." :spinning="loadingPage" size="large" class="loading-page" />
      <template v-if="!loadingPage">
        <div class="ant-pro-pages-list-projects-cardList">
          <a-list :data-source="productList" :grid="{ gutter: 0 }">
            <a-list-item slot="renderItem" slot-scope="item, index">
              <a-card class="ant-pro-pages-list-projects-card" hoverable>
                <img slot="cover" v-lazy="item.cover_imgs ? item.cover_imgs : 'https://img.bzhz.jnbygroup.com/cloth.png'" :alt="item.value" @click="open(item)" />
                <p>款号：{{ item.name }}</p>

                <!-- "0 无任何标签   1 搭配过  2 搭配过同款   3 购买过  4 购买过同款"  5加购过-->
                <p class="tag yellow" v-if="item.tagStatus == 1">搭配过</p>
                <p class="tag yellow" v-else-if="item.tagStatus == 2">搭配过同款</p>
                <p class="tag red" v-else-if="item.tagStatus == 3">购买过</p>
                <p class="tag red" v-else-if="item.tagStatus == 4">购买过同款</p>
                <p class="tag green" v-else-if="item.tagStatus == 5">加购过</p>
                <!-- <p class="recommend-look" @click="showRecommend(item)" v-if="item.inLook == 1"><a-icon type="search" />推荐搭配</p> -->
                <div class="cardItemContent">
                  <h3>{{ item.value }}</h3>
                  <p class="price">
                    <a-skeleton :loading="item.promotionPrice > -1 ? false : true" active style="" :paragraph="false">
                      <span class="red">¥{{ item.promotionPrice.toFixed(2) }}</span>
                    </a-skeleton>
                    <span class="origin" style="text-decoration: line-through; margin-left: 8px">¥{{ item.price.toFixed(2) }}</span>
                  </p>
                  <!-- <p>{{ item.colors_code }}/{{ item.colors }}</p> -->
                  <template v-if="isBox">
                    <p>
                      <!-- <span>销量：{{ item.sales_num }}</span> -->
                      <span class="blue">库存：{{ item.currentSku.stock }}</span>
                    </p>

                    <div class="size-box">
                      <a-radio-group v-model="item.currentSku.sizeno" button-style="solid" @change="e => sizeChange(e, index)">
                        <a-radio-button :value="sizeItem.sizeno" v-for="(sizeItem, sizeIndex) in item.skus" :key="sizeIndex" :id="sizeItem.id" :disabled="sizeItem.stock > 0 ? false : true">
                          <a-tooltip>
                            <template slot="title">
                              {{ sizeItem.stylepartsize_model }}
                            </template>
                            <span class="sizename">{{ sizeItem.size_name }}</span>
                          </a-tooltip>
                        </a-radio-button>
                      </a-radio-group>
                    </div>
                  </template>
                </div>
                <template v-if="showSpuStock">
                  <a-tooltip placement="topLeft" overlayClassName="bgc_tooltip" :overlayStyle="{ maxWidth: '300px' }" trigger="click" @visibleChange="visible => triggerTooltip(visible, item)">
                    <template slot="title">
                      <template v-if="item.skuOptions && item.skuOptions.length > 0">
                        <div class="tooltipwrap_left">
                          <span>颜色</span>
                          <span v-for="(newsize, newindex2) in item.skuOptions[0].children" :key="newindex2">{{ newsize.label }}</span>
                        </div>
                        <div class="tooltipwrap_right">
                          <div v-for="(newcolor, newindex) in item.skuOptions" :key="newindex">
                            <span :class="{ checked: newcolor.value == item.colors_code }">{{ newcolor.value }}/{{ newcolor.label }}</span>
                            <span v-for="(newstock, newstockindex) in newcolor.children" :key="newstockindex">{{ newstock.stock }}</span>
                          </div>
                        </div>
                      </template>
                      <div v-else class="loading-stock">
                        <a-spin />
                      </div>
                    </template>
                    <a style="margin-bottom:10px;display:block;width:60px;">查看库存</a>
                  </a-tooltip>
                </template>
                <div class="btn">
                  <a-button type="primary" icon="plus" :loading="item.iconLoading" @click="addGoods(item, index)" block v-if="addProduct"></a-button>
                  <a-button type="primary" @click="sendSingleProduct(item, $event)" block v-if="!addProduct" :disabled="item.spuStock == 0">发送商品</a-button>
                </div>
              </a-card>
            </a-list-item>
          </a-list>
        </div>
      </template>
    </a-drawer>
    <!-- 商详 -->
    <GoodInfoModal ref="goodInfoModal" :weid="weid" :modalWidth="isBox ? '60vw' : '80vw'" :isBox="isBox" @sendProduct="sendProduct"></GoodInfoModal>
  </div>
</template>
<script>
import { skusStockMixin } from '@/views/box/util/mixin'
import { searchSimilarGoods, batchTagsByUnionIdAndskc, queryWeMoProductIds } from '@/api/box/workbench'
import GoodInfoModal from '@/views/box/components/GoodInfoModal'
export default {
  mixins: [skusStockMixin],
  components: {
    GoodInfoModal
  },
  props: {
    unionId: { type: String },
    storeId: { type: String },
    showSpuStock: {
      // 查看spu库存
      type: Boolean,
      default: false,
      required: false
    },
    isBox: {
      type: Boolean,
      default: true,
      required: false
    },
    addProduct: {
      // 添加商品
      type: Boolean,
      default: true,
      required: false
    },
    // 微商城
    weid: {
      type: [String, Number],
      default: null,
      required: false
    },
    // 微商城
    storeIdByLink: {
      type: [String, Number],
      default: null,
      required: false
    }
  },
  data() {
    return {
      visible: false,
      drawerWidth: '85vw',
      loadingPage: true,
      productList: []
    }
  },
  mounted() {},
  methods: {
    onClose() {
      this.visible = false
    },
    show(record) {
      this.loadingPage = true
      this.visible = true
      console.log(record)
      this.fetchData(record.name, record.weiMoProductId)
    },
    async fetchData(productCode, weiMoProductId) {
      let list = await this.getList(productCode)
      if (!this.isBox) {
        /* let spuIds = list.map(e => e.id)
        let spuStock = await this.getSpuStock(spuIds)
        if (spuStock.length > 0) {
          for (let item of list) {
            let re = spuStock.filter(e => e.productId == item.id)
            if (re.length > 0) {
              item.spuStock = parseInt(re[0].qyt)
            } else {
              item.spuStock = 0
            }
          }
        } */
      }
      this.productList = list.map(e => {
        return {
          ...e,
          promotionPrice: -1
        }
      })
      this.loadingPage = false
      if (list.length > 0) {
        let arr = list.map(e => {
          return { spuId: e.id }
        })
        let priceList = await this.getPromotionPrice(arr)
        if (priceList.length > 0) {
          for (let item of this.productList) {
            let promotionPrice = priceList.filter(e => e.spuId == item.id)
            if (promotionPrice.length > 0) {
              item.promotionPrice = promotionPrice[0].promotionPrice
            } else {
              item.promotionPrice = item.price
            }
          }
        }

        // 商品标签
        /*  let tagList = []
        for (let item of list) {
          tagList.push(`${item.name},${item.colors_code}`)
        }

        let resultTags = await this.getBatchTags(tagList)
        if (resultTags.code == 0) {
          for (let item of dataList) {
            let tagItem = resultTags.data.filter(e => e.productCode == item.name && e.productColor == item.colors_code)[0]
            item.tagStatus = tagItem.status
            item.inLook = tagItem.inLook
          }
        } else {
          this.$message.warning(resultTags.msg)
        } */
      } else {
      }
    },
    getList(productCode) {
      const params = {
        requestData: {
          productCode: productCode,
          weid: this.weid
        },
        page: {
          pageNo: 1,
          pageSize: 20
        }
      }
      return searchSimilarGoods(params).then(res => {
        if (res.code == 0) {
          return res.data
        } else {
          this.$message.warning(res.msg)
          return []
        }
      })
    },
    // 批量查询用户的商品标签
    getBatchTags(list) {
      let data = {
        requestData: {
          productCodesAndColors: list,
          unionId: this.unionId
        }
      }
      return batchTagsByUnionIdAndskc(data).then(res => {
        return res
      })
    },
    // 推荐商品spu库存

    getBatchQuerySpuStock(spu) {
      const data = {
        requestData: {
          productIds: spu,
          storeId: this.storeId
        },
        user_id: this.userId
      }
      return batchQuerySpuStock(data)
        .then(res => {
          if (res.code == 0) {
            const qtyList = res.data
            for (var i = 0; i < this.list.length; i++) {
              const result = qtyList.filter(item => {
                if (item.productId == this.list[i].id) {
                  return item
                }
              })
              if (result.length > 0) {
                this.list[i].qty = result[0].qty
              } else {
                this.list[i].qty = 0
              }
            }
          } else {
            this.$toast(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    triggerTooltip(visible, item) {
      if (visible) {
        this.getGoodSpu(item, item.id, this.storeIdByLink, this.weid)
      } else {
        item.skuOptions = []
        this.$forceUpdate()
      }
    },
    async open(item) {
      await this.getGoodSpu(item, item.id, this.storeIdByLink, this.weid)
      if (item.skuOptions.length > 0) {
        let result = []
        for (let good of item.skuOptions) {
          let gr = good.children.filter(e => e.stock > 0)
          result = [...result, ...gr]
        }
        if (result.length > 0) {
          this.$refs.goodInfoModal.show(item.id, '')
        } else {
          this.$refs.goodInfoModal.show(item.id, '', false)
        }
      }
    },
    // 添加商品
    addGoods(item, index) {},
    // 发送商品
    async sendSingleProduct(item, e) {
      console.log(item)
      let list = await this.getwemoIds([item.id])
      if (list.length > 0) {
        let obj = {
          weiMoProductId: list[0].weMoProductId,
          value: item.value,
          cover_imgs: item.cover_imgs,
          promotionPrice: item.promotionPrice
        }
        e.target.firstElementChild.innerText = '再次发送'
        this.$emit('sendProduct', obj)
      } else {
        this.$message.warning('暂无微盟id')
      }
    },
    // 发送商品
    sendProduct(item) {
      this.$emit('sendProduct', item)
    },
    // 微盟商品Id
    getwemoIds(list) {
      let params = {
        requestData: {
          storeId: '417608-31066',
          productIdList: list
        }
      }
      if (this.weid) params.requestData.weid = this.weid
      return queryWeMoProductIds(params).then(res => {
        if (res.code == 0) {
          return res.data
        } else {
          this.$message.warning(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped src="../style/style.less"></style>
<style lang="less" scoped>
/deep/ .ant-drawer-header {
  position: fixed;
  width: 85%;
  box-sizing: border-box;
  z-index: 2;
}
/deep/.ant-drawer-body {
  height: calc(100vh - 60px);
  box-sizing: border-box;
  padding: 55px 24px 0;
  .loading-page {
    position: absolute !important;
    top: 20%;
    left: 45%;
  }
}
.ant-pro-pages-list-projects-cardList {
  margin-top: 12px;
  height: 100%;
  // min-height: 20px;
  // overflow-y: auto;
  /deep/ .ant-row {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: repeat(auto-fill, 172px);
    // grid-row-gap: 16px;
    grid-column-gap: 8px;
  }
  /deep/ .ant-row::before {
    content: '';
    width: 0;
    display: none;
  }
  /deep/ .ant-list-item {
    margin-bottom: 24px;
    .ant-card-hoverable {
      cursor: default;
    }
  }
  /deep/ .ant-card {
    width: 172px;
    position: relative;
    overflow: hidden;
    background: #fff;
    padding: 12px;
  }
  /deep/ .ant-card-hoverable:hover {
    border: 1px solid #1890ff;
    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
  }
  /deep/ .ant-card-body {
    padding: 0 0 12px;
    position: relative;
    min-height: 130px;
    > p {
      margin-top: -30px;
      background: rgba(0, 0, 0, 0.4);
      line-height: 30px;
      color: #fff;
      text-align: center;
      font-size: 12px;
      border-radius: 0 0 4px 4px;
    }
  }
  /deep/ .ant-card-cover {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    background: #fff;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      object-fit: scale-down;
      border-radius: 4px;
    }
  }
  .cardItemContent {
    padding: 0px 0px 6px;
    line-height: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    > p {
      color: #cdcdcd;
      font-size: 12px;
      line-height: 20px;
      margin-bottom: 0;
    }
    > h3 {
      font-size: 16px;
      line-height: 28px;
      margin-bottom: 0;
    }
    .price {
      display: flex;
      align-items: center;
    }
    .red {
      color: #f45555;
      font-size: 14px;
      line-height: 26px;
    }
    .origin {
      font-size: 12px;

      font-weight: 400;
      color: #8c8c8c;
      line-height: 26px;
    }
    .blue {
      color: #1890ff;
    }
    .size-box {
      padding-top: 8px;
      .ant-radio-button-wrapper {
        text-align: center;
        line-height: 24px;
        height: 26px;
        border-radius: 6px;
        margin-right: 8px;
        margin-bottom: 8px;
        min-width: 30px;
        padding: 0;
        border: 1px solid #d9d9d9;
        span {
          line-height: 24px;
          padding: 0 4px;
        }
      }
      .ant-radio-button-wrapper:not(:first-child)::before {
        display: none;
      }
      .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
        box-shadow: none;
      }
    }
    /deep/ .ant-pro-avatar-list {
      flex: 0 1 auto;
    }
    /deep/.ant-skeleton-title {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
  .btn {
    position: absolute;
    bottom: 4px;
    height: 24px;
    width: 148px;
    button {
      height: 24px;
      border-radius: 6px;
    }
    button:active {
      transform: scale(0.9);
    }
  }
  /deep/ .ant-list-pagination {
    margin-top: 0;
  }
}
</style>

